import React from "react";
// import './index.css';
import ProductCard from "../../../../Component/ProductCard";
import {Button,Input} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import BGUtil from "../../../../utils/BGUtil"
// import IFrameUtil from "../../../../utils/IFrameUtil";
import MessageUtil from "../../../../utils/MessageUtil";
import TransactionFinish from "../../../../Common/svg/Transaction/Finish"
import TransactionWaitDelivery from "../../../../Common/svg/Transaction/WaitDelivery"
import TransactionWaitPay from "../../../../Common/svg/Transaction/WaitPay"
import TransactionWaitReceive from "../../../../Common/svg/Transaction/WaitReceive"
import Bar from "../../../../Component/Bar";
import ColorBox from "../../../../Component/ColorBox";
import TransactionServer from "../../../../Server/Trade/TransactionServer";
import URL from "../../../../Server/URL";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        let id=props.match.params.id;
        this.state={
            hired:props.hired,
            sellerName:"",
            seled:false,
            id,
            shopType:0,//商品类型 0二手飞行器 1二手配件 2租赁飞行器 3租赁配件
            droneImg:"",
            price:"",
            brand:"",
            droneType:"",
            model:"",
            sn:"",
            title:"",
            cashDeposit:false,
            isInsurance:false
        }
        this.Gen();

        BGUtil.InitBG();
        // IFrameUtil.UpdateIframeHeight();
    }
    Gen(){
        TransactionServer.TransactionSelectShopDetails(this.state.shopType,
            this.state.id)
            .then(res=>{
                let data=res.data;
                console.log(res)
                this.setState({
                    // sellerName:"",
                    droneImg:URL.GetURL(data.aerocraftImgUrl),
                    price:data.price,
                    brand:data.aerocraftBrand,
                    droneType:data.aerocraftType,
                    model:data.aerocraftModel,
                    sn:data.aerocraftSn,
                    title:data.title,
                    cashDeposit:data.cashDeposit>0,
                    isInsurance:data.insuranceStatus==="0"
                })
            });
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){
        let status=this.state.seled?
        <ColorBox color="#CCC" text="已租出"/>
        :<ColorBox color="#49A1F1" text="未出租"/>;

        let time="租用时间：201909/23-2019/10-03";

        let badge=[];
        if(this.state.isInsurance){
            badge.push(
                <img alt="Insurance" src="/assets/Good/Insurance.png"/>,
            )
        }
        if(this.state.isMoney){
            badge.push(
                <img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>
            )
        }
        return(
            <div className="HireServiceOrderDetail_Container Courseware_Body">
                <div className="HireServiceOrderDetail">
                    <div style={{verticalAlign:"middle"}}>
                    <span className="">
                            <TransactionWaitPay active={true}/>
                            <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="3rem"/></div>
                        </span>
                        <span className="">
                            <TransactionWaitDelivery/>
                            <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="3rem"/></div>
                        </span>
                        <span className="">
                            <TransactionWaitReceive/>
                            <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="3rem"/></div>

                        </span>
                        <span className="">
                            <TransactionFinish/>
                        </span>
                        </div>
                    <div>
                        <div className="OrderDelivery_PayUserName">
                            <span>刘玲玲</span>
                            <span className="OrderDelivery_PayUserPhone">13684739378</span>
                        </div>
                        <div className="OrderDelivery_PayUserAddress">江苏省无锡市上江北路与蒋倩道交口恒隆广场B1</div>
                    </div>
                </div>
                    
                <div className="HireServiceOrderDetail">
                    <ProductCard
                        title={this.state.title}
                        subtitle={["品牌："+this.state.brand, "类型："+this.state.droneType,
                            "型号："+this.state.model,"sn号："+this.state.sn]}
                        badge={badge}
                        priceText={<PriceTag  price={this.state.price} unit={"天"}/>}
                    />
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">卖家昵称</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">订单编号</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">平台交易号</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">交易时间</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                </div>
                
                
                <div className="HireServiceDetail_Bottom">
                        <a href={"/trade/secondHandOrderDelivery/"+this.state.id} alt="pay">
                            <Button style={{width:"12rem"}} type="primary" shape="round" size="large">
                                提醒卖家发货
                            </Button>
                        </a>
                    </div>
            </div>
        )
    }
}